<template>
  <div>
    <!-- Header 区域 -->
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />

    <div v-if="Object.keys(articleDetailList).length === 0">
      <van-loading type="spinner" color="#1989fa">加载中...
      </van-loading>
    </div>
    <div v-else>
      <!-- 文章信息区域 -->
      <div class="article-container">
        <!-- 文章标题 -->
        <h1 class="art-title">{{articleDetailList.title}}</h1>

        <!-- 用户信息 -->
        <van-cell center :title="articleDetailList.aut_name" :label="timeAgo(articleDetailList.pubdate)">
          <template #icon>
            <img :src="articleDetailList.aut_photo" alt="" class="avatar">
          </template>
          <template #default>
            <div>
              <van-button type="info" size="mini" v-if="articleDetailList.is_followed" @click="followedFn(true)">已关注
              </van-button>
              <van-button icon="plus" type="info" size="mini" plain v-else @click="followedFn(false)">关注</van-button>
            </div>
          </template>
        </van-cell>

        <!-- 分割线 -->
        <van-divider></van-divider>

        <!-- 文章内容 -->
        <div class="art-content" v-html="articleDetailList.content"></div>

        <!-- 分割线 -->
        <van-divider>End</van-divider>

        <!-- 点赞 -->
        <div class="like-box">
          <van-button icon="good-job" type="danger" size="small" v-if="articleDetailList.attitude === 1"
            @click="loveFn(true)">已点赞</van-button>
          <van-button icon="good-job-o" type="danger" plain size="small" v-else @click="loveFn(false)">点赞</van-button>
        </div>
      </div>
      <!-- 文章评论部分 -->
      <div>
        <CommentList />
      </div>
    </div>

  </div>
</template>

<script>
import {
  Toast
} from 'vant'
import {
  articleDetailAPI,
  userFollowedAPI,
  userUnFollowedAPI,
  likeArticleAPI,
  unLikeArticleAPI
} from '@/api'
import {
  timeAgo
} from '@/utils/date'
import CommentList from './CommentList.vue'
export default {
  name: 'Detail',
  data () {
    return {
      articleDetailList: {} // 文章数据详情
    }
  },
  components: {
    CommentList
  },
  methods: {
    // 声明方法
    timeAgo,
    // 获取文章数据详情
    async getArticleDetail () {
      const result = await articleDetailAPI(this.$route.query.art_id)
      this.articleDetailList = result.data.data
    },
    // 关注的点击按钮回调
    async followedFn (bool) {
      if (bool) {
        this.articleDetailList.is_followed = !this.articleDetailList.is_followed
        // 取消关注作者
        const result = await userUnFollowedAPI(this.articleDetailList.aut_id)
        if (result.status === 204) {
          Toast('取消关注')
        }
      } else {
        this.articleDetailList.is_followed = !this.articleDetailList.is_followed
        // 关注作者
        const result2 = await userFollowedAPI(this.articleDetailList.aut_id)
        if (result2.status === 201) {
          Toast('关注成功')
        }
      }
    },
    // 点赞文章按钮的回调
    async loveFn (bool) {
      if (bool) {
        // 取消点赞
        this.articleDetailList.attitude = 0
        const result = await likeArticleAPI(this.articleDetailList.art_id)
        if (result.status === 201) {
          Toast('取消点赞')
        }
      } else {
        // 点赞
        this.articleDetailList.attitude = 1
        const result2 = await unLikeArticleAPI(this.articleDetailList.art_id)
        if (result2.status === 204) {
          Toast('点赞成功')
        }
      }
    }
  },
  created () {
    this.getArticleDetail()
  }
}

</script>

<style scoped lang="less">
  .article-container {
    padding: 10px;
    margin-top: 46px;
  }

  .art-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }

  .art-content {
    font-size: 12px;
    line-height: 24px;
    width: 100%;
    overflow-x: scroll;
    word-break: break-all;

    /deep/ img {
      width: 100%;
    }

    /deep/ pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  .van-cell {
    padding: 5px 0;

    &::after {
      display: none;
    }
  }

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f8f8f8;
    margin-right: 5px;
    border: none;
  }

  .like-box {
    display: flex;
    justify-content: center;
  }

  .van-loading{
    text-align: center;
    margin: 80px;
  }
</style>
